<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情 - 冷色调美化</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
            min-height: 100vh;
            color: #222;
            padding: 20px;
        }
        .container {
            max-width: 700px;
            margin: 0 auto;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
            color: #fff;
        }
        .header h1 {
            font-size: 2em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 8px rgba(0,0,0,0.15);
        }
        .card {
            background: rgba(255,255,255,0.97);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(58,123,213,0.12);
            overflow: hidden;
            margin-bottom: 20px;
        }
        .card-header {
            background: linear-gradient(45deg, #2980b9, #6dd5fa);
            color: #fff;
            padding: 20px;
            text-align: center;
        }
        .details {
            padding: 30px;
        }
        .detail-row {
            display: flex;
            margin-bottom: 15px;
        }
        .detail-label {
            width: 120px;
            font-weight: 600;
            color: #2980b9;
        }
        .detail-value {
            flex: 1;
        }
        .status-badge {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.95em;
            font-weight: 600;
            text-align: center;
            display: inline-block;
            min-width: 80px;
        }
        .status-0 { background: #b2bec3; color: #0984e3; }
        .status-1 { background: #74b9ff; color: #fff; }
        .status-2 { background: #00b894; color: #fff; }
        .status-3 { background: #0984e3; color: #fff; }
        .status-4 { background: #636e72; color: #fff; }
        .actions {
            text-align: center;
            margin-top: 30px;
        }
        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 25px;
            text-decoration: none;
            font-size: 1em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 0 10px;
        }
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(58,123,213,0.15);
        }
        .btn-primary {
            background: linear-gradient(45deg, #3a7bd5, #00d2ff);
            color: #fff;
        }
        .btn-danger {
            background: linear-gradient(45deg, #636e72, #b2bec3);
            color: #fff;
        }
        .btn-secondary {
            background: linear-gradient(45deg, #b2bec3, #636e72);
            color: #fff;
        }
        .footer {
            text-align: center;
            margin-top: 30px;
            color: #fff;
            opacity: 0.8;
        }
        @media (max-width: 768px) {
            .container { padding: 10px; }
            .header h1 { font-size: 1.5em; }
            .details { padding: 20px; }
            .detail-row { flex-direction: column; }
            .detail-label { width: 100%; margin-bottom: 4px; }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1><i class="fas fa-snowflake"></i> 订单详情 <i class="fas fa-snowflake"></i></h1>
        </div>
        <div class="card">
            <div class="card-header">
                <h2><i class="fas fa-file-alt"></i> 订单详情</h2>
            </div>
            <div class="details">
                <div class="detail-row">
                    <div class="detail-label">订单编号：</div>
                    <div class="detail-value" th:text="${booking.booking_no}"></div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">用户名：</div>
                    <div class="detail-value" th:text="${booking.username != null ? booking.username : '无'}"></div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">乘客姓名：</div>
                    <div class="detail-value" th:text="${booking.passengerName != null ? booking.passengerName : '无'}"></div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">航班号：</div>
                    <div class="detail-value" th:text="${booking.flightNo != null ? booking.flightNo : '无'}"></div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">航空公司：</div>
                    <div class="detail-value" th:text="${booking.airline != null ? booking.airline : '无'}"></div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">出发机场：</div>
                    <div class="detail-value" th:text="${booking.depAirport != null ? booking.depAirport : '无'}"></div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">到达机场：</div>
                    <div class="detail-value" th:text="${booking.arrAirport != null ? booking.arrAirport : '无'}"></div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">出发时间：</div>
                    <div class="detail-value">
                        <span th:if="${booking.depDate != null}" th:text="${#dates.format(booking.depDate, 'yyyy-MM-dd')}"></span>
                        <span th:if="${booking.depDate != null and booking.depTime != null}"> </span>
                        <span th:if="${booking.depTime != null}" th:text="${booking.depTime}"></span>
                        <span th:if="${booking.depDate == null and booking.depTime == null}">无</span>
                    </div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">到达时间：</div>
                    <div class="detail-value">
                        <span th:if="${booking.arrDate != null}" th:text="${#dates.format(booking.arrDate, 'yyyy-MM-dd')}"></span>
                        <span th:if="${booking.arrDate != null and booking.arrTime != null}"> </span>
                        <span th:if="${booking.arrTime != null}" th:text="${booking.arrTime}"></span>
                        <span th:if="${booking.arrDate == null and booking.arrTime == null}">无</span>
                    </div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">舱位：</div>
                    <div class="detail-value">
                        <span th:switch="${booking.seat_class_id}">
                            <span th:case="1">经济舱</span>
                            <span th:case="2">商务舱</span>
                            <span th:case="3">头等舱</span>
                            <span th:case="*">未知</span>
                        </span>
                    </div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">座位号：</div>
                    <div class="detail-value" th:text="${booking.seatNo}"></div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">订单状态：</div>
                    <div class="detail-value">
                        <span class="status-badge" th:class="${'status-' + booking.status}"
                              th:text="${booking.status == 0 ? '待支付' :
                                       booking.status == 1 ? '已付定金' :
                                       booking.status == 2 ? '已全款' :
                                       booking.status == 3 ? '已出票' : '已取消'}"></span>
                    </div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">总金额：</div>
                    <div class="detail-value" th:text="${booking.total_amount}"></div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">已付定金：</div>
                    <div class="detail-value" th:text="${booking.deposit_paid}"></div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">过期时间：</div>
                    <div class="detail-value" th:text="${booking.expire_time != null ? #dates.format(booking.expire_time, 'yyyy-MM-dd HH:mm:ss') : '无'}"></div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">创建时间：</div>
                    <div class="detail-value" th:text="${booking.created_at != null ? #dates.format(booking.created_at, 'yyyy-MM-dd HH:mm:ss') : '无'}"></div>
                </div>
                <div class="actions">
                    <a th:href="@{/bookings/{id}/edit(id=${booking.id})}" class="btn btn-primary"><i class="fas fa-edit"></i> 修改订单</a>
                    <a th:href="@{/bookings/{id}/cancel(id=${booking.id})}" onclick="return confirm('确定要退订此订单吗？')" class="btn btn-danger"><i class="fas fa-times"></i> 退订订单</a>
                    <a href="/bookings" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> 返回列表</a>
                </div>
            </div>
        </div>
        <div class="footer">
            <p><i class="fas fa-snowflake"></i> 冷色调订单管理系统 <i class="fas fa-snowflake"></i></p>
        </div>
    </div>
</body>
</html>